import React, { Component } from 'react'
import styles from '../style.less'
import { Menu, Icon } from 'antd'
import { Link } from 'react-router-dom'
import store from '../store'
import { observer } from 'mobx-react'
const { SubMenu, Item } = Menu
@observer
export default class extends Component {
  createMenu = config =>
    config.map(item => {
      const { children, icon, title, path, key } = item
      if (children && children.length) {
        return (
          <SubMenu
            key={key}
            title={
              <span>
                {icon && <Icon type={icon} />}
                {title}
              </span>
            }
          >
            {this.createMenu(children)}
          </SubMenu>
        )
      } else {
        return (
          <Item key={key}>
            <Link to={path}>
              {icon && <Icon type={icon} />}
              {title}
            </Link>
          </Item>
        )
      }
    })
  componentDidMount() {
    store.getMenuConfig()
  }
  render() {
    const { menuConfig } = store
    const menu = this.menu
    this.menu = menu && menu.length ? menu : this.createMenu(menuConfig)
    return (
      <div className={styles.side}>
        <Menu
          // openKeys={[...new Set(this.openItem)]}
          // onOpenChange={this.changeOpen}
          // selectedKeys={[active]}
          mode="inline"
          theme="dark"
          // onSelect={this.setVisitHistory}
        >
          {this.menu}
        </Menu>
      </div>
    )
  }
}
